<template>
	<div class="dayHot">
		<h2 class="title">今日热点</h2>
		<ul class="hotPoints">
			<template v-for="(item,index) in dayHotPoints">
				<li class="hotItem" v-if="index<2" :key="item.id" @click="movieNews(item.id)">
					<div class="img"><img :src="item.img" /></div>
					<div class="desc">
						<p class="movieTitle">{{item.title}}</p>
						<p class="movieDetail">{{item.desc}}</p>
						<p class="time">{{item.publishTime}}</p>
					</div>
				</li>
			</template>
		</ul>
		<div class="news">
			<h3>{{dayHotPoints[2].title}}</h3>
			<p>{{dayHotPoints[2].desc}}</p>
			<ul class="imgBox">
				<li v-for="item in dayHotPoints[2].images" :key="item.id">
					<img :src="item.url1" alt="" />
				</li>
			</ul>
			<span class="time">{{dayHotPoints[2].publishTime}}</span>
		</div>
	</div>
</template>

<script>
	import util from '@/assets/js/util.js';
	export default {
		name: "dayHot",
		props: {
			hotPoints: Array
		},
		methods: {
			movieNews(id){
				this.$router.push({
					name: "movieNews",
					params: {
						id
					}
				})
			}
		},
		computed: {
			dayHotPoints() {
				this.hotPoints.forEach((val, index) => {
					val.publishTime = util.transformDate(val.publishTime * 1000);
				})
				//console.log(this.hotPoints)
				return this.hotPoints;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";

	.dayHot {
		padding: 0 vw(16);
		margin-top: vw(10);

		.title {
			font-size: vw(22);
		}

		.hotPoints {
			margin-top: vw(10);

			.hotItem {
				display: flex;
				justify-content: space-between;
				margin-bottom: vw(20);
				padding-bottom: vw(20);
				border-bottom: vw(1) solid #999;

				.img {
					width: vw(131);
					height: vw(91);

					img {
						width: 100%;
						height: 100%;
					}
				}

				.desc {
					width: vw(196);
					display: flex;
					flex-direction: column;

					.movieTitle {
						font-size: vw(16);
						font-weight: bold;
					}

					.movieDetail {
						font-size: vw(14);
						color: #777;
					}
				}
			}
		}
		.news {
			h3 {
				font-size: vw(20);
			}
			p {
				font-size: vw(14);
				color: #999;
			}
			.imgBox {
				display: flex;
				justify-content: space-between;
				margin-top: vw(10);
				li {
					width: vw(109);
					height: vw(74);
					overflow: hidden;
					img {
						width: 100%;
					}
				}
			}
		}
	}

	.time {
		font-size: vw(12);
		color: #777;
	}
</style>
